<template lang="pug">
div
  div.header(ref="header")
    div.header-title 首页

  g-h.menu(:wrap="true" ref="menu")
    router-link.menu-item(
        v-if="item.show"
        v-for="(item, j) in menuList"
        :key="j"
        :to="item.url"
        )
        img.img(:src="item.src" :alt="item.title")
        div {{ item.title }}

</template>

<script>
import util from "$util"

// 本地title对应后台返回的权限名称的map
const titleToPerm = {
  "送验收货": "送验收货",
  "电池收货": "电池收货",
  "小票管理": "小票管理_移动端",
  "按单出库": "按单出库",
  "库存查询": "库存查询_移动端",
  "退货业务": "退货业务",
  "库内移动": "库内移动",
  "盘点": "盘点通知单_移动端",
  "器具查询": "器具库存查询_移动端",
  "物料批次": "物料批次",
  "物料状态": "物料状态",
  "封存/解封": "封存解封",
  "出门证生成": "出门证生成",
  "出门证扫描": "出门证扫描",
  "入厂协同": "入厂管理_移动端",
}

export default {
  data() {
    let menuList = [
      { title: "送验收货", url: "/order", src:"img/order.svg" },
      { title: "电池收货", url: "/battery", src:"img/battery.svg" },
      { title: "小票管理", url: "/receipt", src:"img/receipt.svg" },
      { title: "按单出库", url: "/deliver-by-order", src:"img/deliver-by-order.svg" },
      { title: "库存查询", url: "/stock", src:"img/stock.svg" },
      { title: "退货业务", url: "/refund", src:"img/refund.svg" },
      { title: "库内移动", url: "/stock-move", src:"img/move-left.svg" },
      { title: "盘点", url: "/stock-taking", src:"img/stock-taking.svg" },
      { title: "器具查询", url: "/tray-stock", src:"img/tray-stock.svg" },
      { title: "物料批次", url: "/batch", src:"img/batch.svg" },
      { title: "物料状态", url: "/state", src:"img/part.svg" },
      { title: "封存/解封", url: "/stock-move/pack-unpack", src:"img/pack.svg" },
      { title: "出门证生成", url: "/entry-recognition", src:"img/finger-print.svg" },
      { title: "出门证扫描", url: "/exit-permit-scan", src:"img/scan-head.svg" },
      { title: "入厂协同", url: "/coordination", src:"img/receive-goods.svg" },
      // { title: "明细查询", url: "/detail", src:"img/detail.svg" },
      // { title: "缺件查询", url: "/missing-part", src:"img/missing-part.svg" },
      // { title: "料废业务", url: "/waste", src:"img/waste.svg" },
      // { title: "收货查询", url: "/receive-goods", src:"img/receive-goods.svg" },
      // { title: "移库管理", url: "/move-stock", src:"img/move-right.svg" },
    ]
    for (let item of menuList) {
      item.show = this.$root.User.permMap[titleToPerm[item.title]]
    }

    return {
      menuList,
    }
  },

  mounted() {
    let tabbar = document.querySelector(".tab-bar")
    let tabH = tabbar ? tabbar.clientHeight : 53
    let winH = window.innerHeight
    let headerH = this.$refs.header.clientHeight
    let menu = this.$refs.menu
    menu.$el.style.height = winH - headerH - tabH + "px"
  },
}
</script>

<style lang="stylus" scoped>

.header
  position: relative
  header-style()

  &-title
    position: absolute
    top: 50%
    left: 50%
    transform(translate(-50%,-50%))

.menu
  overflow-y: scroll
  &::-webkit-scrollbar
    display: none
  // padding-bottom: 3rem
  &-item
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center
    padding: 0.7rem 0.4rem
    width: 33.3%

.img
  margin: 0.5em 0
  width: 2rem

</style>
